<template>
  <div>
      <Nav/>
       <div class="main">
        <div class="w">
            <h3>全部商品</h3>
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body" v-for="(info_list,index) in getcartInfoList" :key="index">
                <!-- {{Cart_List}} -->
                <!-- <p v-for="(list,index) in Cart_List" :key="index">{{list.cartInfoList[0].isChecked}}</p> -->
                <ul v-for="(list,index) in info_list.cartInfoList" :key="index">
                    <li>
                        <input type="checkbox" :checked='list.isChecked' @click="IS_Checked(list,index)" >
                    </li>
                    <li>
                            <img :src="list.imgUrl" alt="" width="82px" height="82px">
                            <p>{{list.skuName}}</p>
                    </li>   
                    <li>
                        <span>{{list.skuPrice}}</span>
                    </li>
                    <li>
                        <a href.prevent="" @click="handler('Minus',-1,list)">-</a>
                        <input type="text" :value="list.skuNum" @change="handler('Text',$event,list)" >
                        <a href.prevent="" @click="handler('Add',+1,list)">+</a>
                    </li>
                    <li>
                        <span>{{list.skuPrice * list.skuNum}}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a href.prevent="" @click='deleteCart(list)'>删除</a>
                        <br>
                        <a href="">移到收藏</a>
                    </li>
                </ul>
            </div>
            <div class="cart-tool">
                <div class="top">
                    <input type="checkbox" name="" id="" :checked="allCheckbox" @click="All_lisCheckbox($event)">
                    <span class="all" >全选</span>
                    <a href.prevent="" @click="AlldeleteCart">删除选中的商品</a>
                    <a href="">移到我的关注</a>
                    <a href="">清除下柜商品</a>
                </div>
                <div class="bootom">
                    <i class="first">已选择 {{getLength}} 件商品</i>
                    <i>总价（不含运费） ： </i>
                    <span class="num">{{allPrice}}</span>
                    <span class="button" @click="goPirce">结算</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {throttle} from 'lodash'
export default {
    name:'cart',
    mounted() {
        this.Get_List();
    },
    methods: {

        // 发送数据给cartList的vuex
        Get_List(){
                    this.$store.dispatch('cartList/cart_list');              
        },

        // 点击删除  移出当前商品
       async deleteCart(list){
           try {
              await this.$store.dispatch('cartList/delete_cart',list.skuId);
               this.Get_List();
           } catch (error) {
               console.log(error);
           }
        },

        // 减 | 输入框 | 加 
        handler: throttle(async function (type,index,list) {
                switch (type) {
                    // 减
                    case 'Minus':
                            if(list.skuNum < 2){
                                index = 0
                            }
                        break;
                    case 'Text':
                        if (isNaN(index.target.value) || index.target.value < 1) {
                            index = 0
                        }else{
                            index = parseInt(index.target.value) -list.skuNum;
                        }
                        break;
                    case 'Add':
                        break;
                }
                try {
                    await this.$store.dispatch('detail/getToCart',[list.skuId,index]);
                    this.Get_List();
                } catch (error) {
                    console.log(error);
                }
        },600),
        
        //商品的is_checked 是 1 还是  0   
       async IS_Checked(list){
                list.isChecked == 1 ? list.isChecked = 0: list.isChecked = 1
                try {
                   await this.$store.dispatch('cartList/checkcart',{
                            skuID:list.skuId,
                            isChecked:list.isChecked
                    })
                    this.$nextTick(()=>{
                        this.Get_List();
                    })
                } catch (error) {
                    console.log(error);
                }
        },

        //删除所有的选中商品
       async AlldeleteCart(){
            try {
                await this.$store.dispatch('cartList/alldeletecart');
                 this.Get_List();
            } catch (error) {
                console.log(error);
            }
        },

        // 选择全部选中与不选中
       All_lisCheckbox:throttle(async function(event){
            let checked =  event.target.checked ? 1 : 0
           try {
            //    如果全选按钮为ture  则checked=1 否则为0 并且把cheked的数据携带参数发送请求
             await this.$store.dispatch('cartList/AllCheckbox',checked)
                        this.Get_List();
           } catch (error) {
               console.log(error);
           }
        },1000),

        goPirce(){
            this.$route.meta.fleg=true
            this.$router.push('/trade')
        }
    },
    computed: {
        // 获取选择了几个商品
        getLength(){
            let len = 0 //计数器
            //循环遍历产品
            console.log();
            this.getcartInfoList.forEach(element => {
                element.cartInfoList.forEach(element => {
                    //如果产品选择了 则计数器+1
                    if (element.isChecked==1) {
                          len++
                    }
                });
            });
            return len
        },
        // 购物车数据
        getcartInfoList(){
            // 如果购物车数据没有回来 则为[]
            return this.Cart_List || [];
        },
        // 获取carlist的vuex  数据
        ...mapState('cartList',['Cart_List']),
        // 判断全选是否根据数据改变
        allCheckbox(){
            // 如果没有数据 则checkbox为false
            if (this.getcartInfoList == '') {
                return false
            }
            // 判断getcarInfoList的checked是否都等于1  如果有一个不等于则为false 否为true
           return this.getcartInfoList.every(item=>{
               let fleg =  item.cartInfoList.every(item=>{
                    return item.isChecked == 1 
                })
                return fleg
            })
        },
        // 总价格 （产品的总价）
        allPrice(){
            let array=[] //定义一个数组 保存产品checked = true 数据
            this.getcartInfoList.forEach(element => {
                element.cartInfoList.forEach(element => {
                    // 如果ischecked =1 则把数据添加到数组末尾
                    if (element.isChecked==1) {
                        array.push(element)
                    }
                });
            });
            // 计算checked = true 的产品 价格累加 
            //参数一为funciotn  
                // function参数一  为累加数值
                // function参数二   为循环数据
            // 参数二为 累加数的开始值
            return array.reduce((item,b)=>{
                return  item + (b.skuPrice * b.skuNum)
            },0);
        }
    },
}
</script>

<style scoped lang='less'>
    .main{
    .w{
        h3{
            color: #000;
            margin: 10px 0px;
        }
        .cart-th{
            background: #f5f5f5;
            border: 1px solid #ddd;
            display: flex;
            padding: 10px;
            .cart-th1,.cart-th2{
                width: 25%;
            }
            .cart-th2{
                width: 21.5%;
            }
            .cart-th3,.cart-th4,.cart-th5,.cart-th6{
                width: 12.5%;
            }
        }
        .cart-body{
            margin-top: 20px;
            border: 1px solid #ddd;
            border-bottom: 0;
            ul{
                padding: 10px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;
                a{
                    cursor: pointer;
                }
                a:hover{
                    text-decoration: underline;
                    color: red;
                }
                &>li:first-child{
                    margin-right: 46px;
                }
                &>li:nth-child(2){
                    display: flex;
                    p{
                        align-self: center;
                        margin-left: 25px;
                        width: 260px;
                    }
                }
                &>li:nth-child(3){
                    width: 30px;
                    text-align: center;
                    margin-left: 125px;
                    margin-right: 120px;
                }
                &>li:nth-child(4){
                    display: flex;
                    margin-left: -30px;
                    a{
                        display: block;
                        width: 15px;
                        border: 1px solid #ddd;
                        text-align: center;
                        line-height: 31px;
                        height: 31px;
                    }
                    input{
                        border: 0;
                        border-top:1px solid #ddd ;
                        border-bottom: 1px solid #ddd;
                        width: 38px;
                        height: 31px;
                        text-align: center;
                    }
                   
                }
                &>li:nth-child(5){
                    margin-left: 100px;
                    width: 40px;
                    text-align: center;
                }
                &>li:nth-child(6){
                    margin-left: 97px;
                    span{
                        font-size: 16px;
                    }
                }
               .cart-list-con7{
                   margin-left: 87px;
                   &>a:first-child{
                       display: inline-block;
                       width: 48px;
                       text-align: center;
                   }
               }
            }
        }
        .cart-tool{
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            height: 52px;
            border: 1px solid #ddd;
            div{
                margin-top: 10px;
            }
            .top{
                display: flex;
                span{
                   display: inline; 
                   width: 30px;
                }
                input{
                    margin-left: 10px;
                    margin-top: 2px;
                }
                a{
                    // width: 88px;
                    cursor: pointer;
                    display: inline; 
                    padding: 0px 10px;
                }
            }
            .bootom{
                display: flex;
                margin-top: 0;
                i{
                    display: inline;
                    padding-top: 10px;
                }
                .num{
                    color: #c81623;
                    font-size: 16px;
                    padding-top: 10px;
                }
                .button{
                    float: right;
                    display: block;
                    width: 96px;
                    height: 52px;
                    line-height: 52px;
                    color: #ffff;
                    text-align: center;
                    font-size: 18px;
                    background: #e1251b;
                    margin-left: 56px ;
                    cursor: pointer;
                }
            }
        }
    }
}
.footer{
    margin-top: 10px;
}
</style>